<template>
	<div class="conatior">
		<div class="header">
			<el-form :inline="true">
				<el-form-item label="交易账号" label-width="80px">
					<el-input placeholder="请输入交易账号" size="mini" v-model="formData.accountNumber" />
				</el-form-item>
				<el-form-item label="考核人" label-width="80px">
					<el-input placeholder="请输入考核人" size="mini" v-model="formData.username" />
				</el-form-item>
				<el-form-item label="邮箱" label-width="80px">
					<el-input size="mini" v-model="formData.emails" placeholder="请输入邮箱" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="mini" @click="search">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="content">
			<el-table border :data="tableData" style="width: 100%">
				<!-- use -->
				<el-table-column prop="username" align="center" width="120px" label="考核人" />
				<el-table-column prop="accountNumber" align="center" width="120px" label="交易账号" />



				<!-- edit -->
				<!-- <el-table-column prop="msg" align="center" width="120px" label="msg" /> -->
				<!-- <el-table-column prop="company" align="center" width="120px" label="company" /> -->
				<!-- <el-table-column prop="currency" align="center" width="120px" label="账户币种" /> -->
				<!-- <el-table-column prop="name" align="center" width="120px" label="name" /> -->
				<!-- <el-table-column prop="server" align="center" width="120px" label="交易服务器" /> -->

				<el-table-column prop="login" align="center" width="120px" label="登录账号" />
				<!-- <el-table-column prop="tradeMode" align="center" width="120px" label="tradeMode" /> -->
				<el-table-column prop="leverage" align="center" width="120px" label="杠杆" />
				<!-- <el-table-column prop="limitOrders" align="center" width="120px" label="limitOrders" /> -->
				<!-- <el-table-column prop="marginSoMode" align="center" width="120px" label="marginSoMode" /> -->
				<!-- <el-table-column prop="tradeAllowed" align="center" width="120px" label="tradeAllowed" /> -->
				<!-- <el-table-column prop="tradeExpert" align="center" width="120px" label="tradeExpert" /> -->
				<el-table-column prop="balance" align="center" width="120px" label="余额" />
				<!-- <el-table-column prop="credit" align="center" width="120px" label="credit" /> -->
				<el-table-column prop="equity" align="center" width="120px" label="净值" />
				<el-table-column prop="profit" align="center" width="120px" label="盈利" />
				<el-table-column prop="margin" align="center" width="120px" label="已用保证金" />
				<el-table-column prop="marginFree" align="center" width="120px" label="可用保证金" />
				<el-table-column prop="marginLevel" align="center" width="120px" label="预付款比例" />
				<!-- <el-table-column prop="marginSoCal" align="center" width="120px" label="marginSoCal" /> -->
				<!-- <el-table-column prop="marginSoSo" align="center" width="120px" label="marginSoSo" /> -->
				<!-- <el-table-column prop="openTime" align="center" width="180px" label="开仓时间">
					<template #header>
						<div class="box">
							<li>开仓时间</li>
							<p>
								<span @click="sortU('open_time', 1)">
									<svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12"
										height="12" fill="#909399">
										<path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z"
											p-id="2640"></path>
									</svg>
								</span>
								<span @click="sortD('open_time', 2)">
									<svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12"
										fill="#909399">
										<path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
									</svg>
								</span>
							</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="type" align="center" width="120px" label="类型" />
				<el-table-column prop="lots" align="center" width="120px" label="手数">
					<template #header>
						<div class="box">
							<li>手数</li>
							<p>
								<span @click="sortU('lots', 1)">
									<svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12"
										height="12" fill="#909399">
										<path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z"
											p-id="2640"></path>
									</svg>
								</span>
								<span @click="sortD('lots', 2)">
									<svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12"
										fill="#909399">
										<path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
									</svg>
								</span>
							</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="symbol" align="center" width="120px" label="交易品种">
					<template #header>
						<div class="box">
							<li>交易品种</li>
							<p>
								<span @click="sortU('symbol', 1)">
									<svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12"
										height="12" fill="#909399">
										<path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z"
											p-id="2640"></path>
									</svg>
								</span>
								<span @click="sortD('symbol', 2)">
									<svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12"
										fill="#909399">
										<path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
									</svg>
								</span>
							</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="openPrice" align="center" width="120px" label="开仓价格" />
				<el-table-column prop="stopLoss" align="center" width="120px" label="止损" />
				<el-table-column prop="takeProfit" align="center" width="120px" label="止盈" />
				<el-table-column prop="closeTime" align="center" width="200px" label="关仓时间">
					<template #header>
						<div class="box">
							<li>关仓时间</li>
							<p>
								<span @click="sortU('close_time', 1)">
									<svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12"
										height="12" fill="#909399">
										<path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z"
											p-id="2640"></path>
									</svg>
								</span>
								<span @click="sortD('close_time', 2)">
									<svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12"
										fill="#909399">
										<path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
									</svg>
								</span>
							</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="closePrice" align="center" width="120px" label="关仓价格" />
				<el-table-column prop="commission" align="center" width="120px" label="手续费" />
				<el-table-column prop="swap" align="center" width="120px" label="库存费" />
				<el-table-column prop="netProfit" align="center" width="120px" label="获利">
					<template #header>
						<div class="box">
							<li>获利</li>
							<p>
								<span @click="sortU('net_profit', 1)">
									<svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12"
										height="12" fill="#909399">
										<path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z"
											p-id="2640"></path>
									</svg>
								</span>
								<span @click="sortD('net_profit', 2)">
									<svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12"
										fill="#909399">
										<path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
									</svg>
								</span>
							</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="profitpips" align="center" width="120px" label="点数" />
				<el-table-column prop="duration" align="center" width="130px" label="持仓时间(秒)">
					<template #header>
						<div class="box">
							<li>持仓时间</li>
							<p>
								<span @click="sortU('duration', 1)">
									<svg t="1721730356203" class="icon" viewBox="0 0 1085 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2639" id="mx_n_1721730356203" width="12"
										height="12" fill="#909399">
										<path d="M545.20232799 240.601164L1087.99999999 783.398836l-1085.595343 0z"
											p-id="2640"></path>
									</svg>
								</span>
								<span @click="sortD('duration', 2)">
									<svg t="1721730368158" class="icon" viewBox="0 0 1085 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" p-id="2818" width="12" height="12"
										fill="#909399">
										<path d="M542.797672 783.398836L0 240.601164h1085.595343z" p-id="2819"></path>
									</svg>
								</span>
							</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="profitUsd" align="center" width="120px" label="净利润" />
				<el-table-column prop="magicNo" align="center" width="120px" label="魔术号" /> -->

				<!-- use -->
				<el-table-column prop="emails" align="center" width="200px" label="归属邮箱" />
				<el-table-column prop="creatTime" align="center" width="200px" label="上传时间" />
			</el-table>
			<div class="fy" style="display: flex;justify-content: flex-end;margin-top: 5px;">
				<paging :page-size="formData.pageSize" :total="total" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<script>
import { getUserData } from '@/api/distributed'
import paging from '@/components/paging.vue'
export default {
	name: 'history',
	components: {
		paging
	},
	data() {
		return {
			total: 0,
			formData: {
				accountNumber: "",  // 交易账号
				page: 1,
				pageSize: 10,
				username: "",   // 考核人
				emails: "",
				sortField: null,  // 排序的字段
				sortOrder: null   // 排序的方向
			},
			tableData: []
		}
	},
	methods: {
		async getData() {
			let res = await getUserData(this.formData)
			this.tableData = res.records
			this.total = res.total
		},
		// 查询
		search() {
			this.formData.page = 1
			this.getData()
		},
		// 分页
		handleSizeChange(val) {
			this.formData.pageSize = val
			this.getData()
		},
		handleCurrentChange(val) {
			this.formData.page = val
			this.getData()
		},
		// 升序  
		sortU(item, type) {
			this.formData.sortField = item
			this.formData.sortOrder = type
			this.getData()
		},
		// 降序
		sortD(item, type) {
			this.formData.sortField = item
			this.formData.sortOrder = type
			this.getData()
		}
	},
	// 组件挂载完毕
	mounted() {
		this.getData()
	}
}
</script>


<style scoped lang="scss">
.conatior {
	height: 100%;
	width: 100%;

	.header {
		background-color: #fff;
		padding: 20px;
		border-radius: 5px;
	}

	.content {
		margin-top: 20px;
		background-color: #fff;
		padding: 20px;
		border-radius: 5px;
	}

	.fy {
		width: 100%;

		::v-deep.el-input__inner {
			width: 100px;
		}
	}

	@media (max-width:768px) {
		.fy {
			display: flex;
			justify-content: flex-end;
			width: 100%;

			.el-pagination {
				width: 100%;


			}


		}
	}
}

.box {
	display: flex;
	align-items: center;
	justify-content: center;

	li {
		list-style: none;
	}

	p {
		display: flex;
		flex-direction: column;
		margin-left: 5px;
		padding: 0;
		height: 23px;

		span {
			height: 8px;
			display: flex;
		}
	}
}


@media (max-width:768px) {

	.el-form-item {
		display: flex;


	}
}
</style>